<%@page import="java.util.Date"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="../include/tag.jsp"%>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>精细化数据分析</title>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/common/table.css">
    <link rel="stylesheet" href="${ctx}/css/ui/activity/member_act_list.css">
    <%@include file="../include/commonFile.jsp"%>
</head><body>
<!--头部-->
<%@include file="../include/header.jsp"%>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp"%>
    <!--内容-->
    <section>
        <div class="section-main">
            <div class="content" id="charts" style="height:400px; "></div>

        <form class="layui-form" id="searchForm" method="post">
            <input type="hidden" name="pageNo" id="pageNo" />
            <input type="hidden" id="operatorId" name="operatorId" value="${operatorId}">
            <input type="hidden" id="date2" name="date">
        </form>
        <div class="my-act-list-content">
            <div class="cl" style="min-width: 930px;padding: 15px 30px;">
                <table class="layui-table" lay-skin="line" id="myTable">
                    <colgroup>
                        <col>
                        <col>
                        <col width="150px">
                    </colgroup>
                    <thead>
                    <tr>
                        <th id="date"></th>
                        <th></th>
                        <th style="text-align: center">访问次数：<span id="times"></span> 次</th>
                    </tr>
                    </thead>
                    <tbody id="log_content">
                    </tbody>
                </table>
                <div id="page_content" class="page-container"></div>
            </div>
        </div><!--底部-->
        </div>
        <%@include file="../include/footer.jsp"%>
    </section>
</div>



<script id="log_template" type="text/x-dot-template">
    {{#  layui.each(d, function(index, item){ }}
    <tr class="info">
        <td>
            <div> {{ util.getDateStr(item.timestmp).Format('hh:mm:ss') }}</div>
        </td>
        <td>
            <div> {{item.formattedMessage}}</div>
        </td>
        <td>
            <div class="option">
                <i class="iconfont icon-unfold"></i>
                <i class="iconfont icon-fold dis-none"></i>
            </div>
        </td>
    </tr>
    <tr class="dis-none info-detail">
        <td colspan="3">
            <div>
                <table width="100%" class="childTable layui-table" lay-skin="row"
                       style="margin: 0px">
                    <tbody>
                    <tr>
                        <td>浏览器</td>
                        <td>{{item.browser}}</td>
                    </tr>
                    <tr>
                        <td>IP</td>
                        <td> {{item.remoteAddr}}</td>
                    </tr>
                    <tr>
                        <td>操作系统</td>
                        <td>{{item.operatSystem}}</td>
                    </tr>
                    <tr>
                        <td>请求链接</td>
                        <td> {{item.requestUrl}}</td>
                    </tr>
                    {{# if(util.isValid(item.businessId)){ }}
                    <tr>
                        <td>业务编号</td>
                        <td>{{item.businessId}}</td>
                    </tr>
                    {{# } }}
                    </tbody>
                </table>
            </div>
        </td>
    </tr>
    {{#  }); }}

</script>
<script type="text/javascript" src="${ctx}/script/common/list.js"></script>
<script type="text/javascript" src="${ctx}/script/common/util.js"></script>
<script type="text/javascript" src="${ctx}/script/common/table_option.js"></script>
<script type="text/javascript" src="${ctx}/static/echarts-3.0/echarts.min.js"></script>
<script type="text/javascript" src="${ctx}/static/echarts-3.0/base_config.js"></script>
<script type="text/javascript">
    var laytpl = null;
    var laypage = null;
    $(function () {
        layui.use([ 'laytpl', 'laypage' ], function() {
            laytpl = layui.laytpl;
            laypage = layui.laypage;
            list();
        });

        $('#myTable').delegate('.option', 'click', function (e) {
            var info = $(this).closest('.info');
            if (!info.hasClass('active')) {//打开
                $('.info').removeClass('active');
                $(".info-detail").removeClass('dis-block');
                info.toggleClass('active');
                $(info).next(".info-detail").addClass('dis-block');
            } else {
                info.toggleClass('active');
                $(info).next(".info-detail").removeClass('dis-block');
            }
        });
    })

    function getDta(operatorId) {
        $.get('${ctx}/log/event/chart.do',{operatorId : operatorId},function (res) {
            var charts = echarts.init(document.getElementById('charts'));
            var option = {
                xAxis: {
                    data: res.data.dateList
                },
                series: [{
                    name: '数据量',
                    type: 'line',
                    data: res.data.chartList,
                }]
            };
            option = getEchartBaseLineOpt(option);
            charts.setOption(option);
            charts.on('click', function (params) {
                var date = params.name;
                list(date);
            });
        })
    }

    var operatorId = '${operatorId}';
    function appendHtml(data) {
        var getTpl = $("#log_template").html();
        var content = $('#log_content');
        $(content).html("");
        $('#date').text(data.date);
        $('#date2').val(data.date)
        laytpl(getTpl).render(data.logList, function(html)  {
            content.append(html);
        });
    }

    function list(date) {
        $.post("${ctx}/log/event/behaviorData.do", {operatorId: operatorId, date: date}, function (data) {
            loadPageNew({
                elem: 'page_content',
                totalCount: data.page.totalCount,
                limit: data.page.limit,
                page: data.page.page,
                formName: 'searchForm',
                callback: function () {
                    $.post("${ctx}/log/event/behaviorData.do", $('#searchForm').serialize(), function(data) {
                        // 填充数据
                        appendHtml(data.data);
                    });
                }
            });
            appendHtml(data.data);
            $('#times').text(data.page.totalCount);
        })
    }

    getDta(operatorId);
</script>
<script type="text/javascript">
    txz.initHeader({
        nav:[{
            name: '精细化数据分析'
        }],
        btns:[{
            type:'back'
        }]
    });
</script>
</body>
</html>